<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>报名</title>
  <style>
    html {
      font-size: 10px;
    }

    body {
      font-size: 1.4rem;
      margin: 0;
    }

    .form-container {
      margin: 2rem;
    }

    .form-container form {
      margin: 0 auto;
      width: 100%;
      max-width: 64rem;
    }

    .form-fields {
      /* border: .1rem solid #ddd; */
      padding: 2rem;
      padding-top: 4rem;
      margin-bottom: 2rem;
    }

    fieldset {
      border: none;
      margin: 0;
      padding: 2rem;
      margin-bottom: 2rem;
    }

    legend,
    .form-fields-caption {
      font-size: 1.6rem;
      font-weight: bold;
      margin: 0;
    }

    .form-fields-caption {
      float: left;
      margin-top: -4rem;
    }

    .form-field {
      margin-bottom: 1rem;
    }

    .form-field:last-child {
      margin-bottom: 0;
    }

    .form-field label:after {
      content: "："
    }

    .form-field input {
      border: none;
      border-bottom: .1rem solid #ddd;
      padding: .5rem;
    }

    .form-field select {
      display: block;
      margin-top: 1rem;
    }

    .form-field textarea {
      display: block;
      resize: none;
      margin-top: 1rem;
      border: none;
      border-bottom: .1rem solid #ddd;
    }

    .form-field .chips {
      margin-top: 1rem;
    }

    .form-field .chips .chip {
      display: inline-block;
      padding: .5rem 1rem;
      border: .1rem solid #ddd;
      line-height: 1.5rem;
      border-radius: 1.25rem;
    }

    .form-field .chips .chip button {
      border: none;
    }

    .form-actions {
      padding: 2rem;
    }

    .form-actions button {
      border: .1rem solid #ddd;
      padding: .5rem;
      background-color: #f0f0f0;
      border-radius: .3rem;
    }

    .select {
      margin-top: 1rem;
    }

    .select label {
      margin-right: 1rem;
    }

    .select label:last-child {
      margin-right: 0;
    }

    .select label::after {
      content: ""
    }
  </style>
</head>
<body>
  <div class="form-container">
    <form>
      <div class="form-fields">
        <h4 class="form-fields-caption">基础信息</h4>
        <div class="form-field">
          <label for="field-name">姓名</label>
          <input placeholder="姓名" name="name" id="field-name" />
        </div>
        <div class="form-field">
          <label>籍贯</label>
          <input placeholder="籍贯" name="nativeplace" />
        </div>
        <div class="form-field">
          <label>年龄</label>
          <input placeholder="年龄" name="age" type="number" min="1" max="120"/>
        </div>
      </div>
      <div class="form-fields">
        <h4 class="form-fields-caption">联系方式</h4>
        <div class="form-field">
          <label>邮箱</label>
          <input placeholder="邮箱" name="email" type="email" />
        </div>
        <div class="form-field">
          <label>地址</label>
          <input placeholder="地址" name="address" />
        </div>
      </div>

      <fieldset>
        <legend>扩展信息</legend>
        <div class="form-field">
          <label>兴趣</label>
          <input placeholder="兴趣" name="hobits" />
        </div>
        <div class="form-field">
          <label>特长</label>
          <input placeholder="特长" name="advantages" />
        </div>
      </fieldset>

      <fieldset>
        <legend>问卷调查</legend>
        <div class="form-field">
          <label>您有多少年互联网使用经验？</label>
          <select name="quota[0]">
            <option value="0">少于5年</option>
            <option value="1">少于10年</option>
            <option value="2">少于15年</option>
            <option value="3">少于20年</option>
            <option value="4">20年以上</option>
          </select>
        </div>
        <div class="form-field">
          <label>您用过哪些APP？</label>
          <select name="quota[1]" multiple>
            <option value="0">QQ</option>
            <option value="1">微信</option>
            <option value="2">微博</option>
            <option value="3">百度</option>
            <option value="4">支付宝</option>
          </select>
        </div>
        <div class="form-field">
          <label>下列哪一位是您的熟人？</label>
          <div class="select">
            <label class="option"><input name="quota[2]" type="radio" /> 潘韬</label>
            <label class="option"><input name="quota[2]" type="radio" /> 宋仲勋</label>
          </div>
        </div>
        <div class="form-field">
          <label>下列哪些是您的家人</label>
          <div class="select">
            <label class="option"><input name="quota[3][0]" type="checkbox" /> 潘韬</label>
            <label class="option"><input name="quota[3][0]" type="checkbox" /> 宋仲勋</label>
          </div>
        </div>
        <div class="form-field">
          <label>请简单介绍一下自己，字数500字以内。</label>
          <textarea rows="5" cols="70" placeholder="我是一名帅哥……" name="bio">这个是默认内容</textarea>
        </div>
        <div class="form-field">
          <label>给自己打个标签吧：</label>
          <div class="chips">
            <div class="chip">帅气 <button type="button">x</button></div>
            <div class="chip">暧男 <button type="button">x</button></div>
            <div class="chip">高大 <button type="button">x</button></div>
            <input type="text" class="chip" placeholder="输入标签">
          </div>
        </div>
      </fieldset>

      <fieldset>
        <legend>安全设置</legend>
        <div class="form-field">
          <label for="">密码</label>
          <input type="password" name="password" placeholder="********">
        </div>
      </fieldset>
    
      <div class="form-actions">
        <button type="submit">
          提交
        </button>
      </div>
    </form>
  </div>

  <script>
    function submit(e) {
      // e && e.preventDefault && e.preventDefault()
      if (e && e.preventDefault) {
        e.preventDefault()
      }
      var form = e.target

      console.log(form.length)

      for (var i = 0; i < form.length; i ++) {
        var field = form[i]
        console.log(field.name, ' : ', field.value)
      }

      // alert('请填写所有内容')
    }
    function plus (x, y ) {
      return x + y
    }
    var form = document.getElementsByTagName('form')[0]
    form.onsubmit = submit
    </script>
</body>
</html>